---
title: Alert Dialog
description: A modal dialog that interrupts the user with important content and expects a response.
---

import { CommandTabs } from "@docs/components/command-tabs";
import { ExternalLinks } from "@docs/components/external-links";
import { PortalInfoAlert } from '@docs/components/portal-info-alert';
import { PreviewCard } from "@docs/components/preview-card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@docs/components/ui/tabs";
import { AlertDialogPreview } from "@docs/components/examples";
import { Step, Steps } from 'fumadocs-ui/components/steps';

<ExternalLinks
  links={[
    { title: 'Docs', url: 'https://rnprimitives.com/alert-dialog/' },
    { title: 'API Reference', url: 'https://rnprimitives.com/alert-dialog/#props' },
  ]}
/>

<div className="h-5"/>

<Tabs defaultValue="preview">
  <TabsList>
    <TabsTrigger value="preview">Preview</TabsTrigger>
    <TabsTrigger value="code">Code</TabsTrigger>
  </TabsList>
  <TabsContent value="preview">
    <div id="preview" className='*:hidden scroll-m-20' aria-hidden>
      ## Preview
    </div>
    <PreviewCard preview={<AlertDialogPreview />} />
  </TabsContent>
  <TabsContent value="code">
    ```json doc-gen:file
    {
      "file": "./node_modules/@rnr/registry/src/examples/alert-dialog.tsx",
      "codeblock": {
        "lang": "tsx"
      }
    } 
    ```
  </TabsContent>
</Tabs>


## Installation

<Tabs defaultValue="cli">
  <TabsList>
    <TabsTrigger id="cli" value="cli">CLI</TabsTrigger>
    <TabsTrigger id="manual" value="manual">Manual</TabsTrigger>
  </TabsList>
  <TabsContent value="cli">
    <CommandTabs args={["add", "alert-dialog"]}/>
  </TabsContent>
  <TabsContent value="manual">
    <Steps>
      <Step>
 
        **Install the following dependency:**

        ```
        npx expo install @rn-primitives/alert-dialog
        ```

      </Step>
      <Step>
 
        **Copy and paste the following code into your project.**

        ```json doc-gen:file
        {
          "file": "./node_modules/@rnr/registry/src/new-york/components/ui/text.tsx",
          "codeblock": {
            "lang": "tsx",
            "meta": "title=\"@/components/ui/text.tsx\""
          }
        }
        ```

        ```json doc-gen:file
        {
          "file": "./node_modules/@rnr/registry/src/new-york/components/ui/button.tsx",
          "codeblock": {
            "lang": "tsx",
            "meta": "title=\"@/components/ui/button.tsx\""
          }
        }
        ```

        ```json doc-gen:file
        {
          "file": "./node_modules/@rnr/registry/src/new-york/components/ui/native-only-animated-view.tsx",
          "codeblock": {
            "lang": "tsx",
            "meta": "title=\"@/components/ui/native-only-animated-view.tsx\""
          }
        }
        ```

        ```json doc-gen:file
        {
          "file": "./node_modules/@rnr/registry/src/new-york/components/ui/alert-dialog.tsx",
          "codeblock": {
            "lang": "tsx",
            "meta": "title=\"@/components/ui/alert-dialog.tsx\""
          }
        }
        ```

      </Step>
      <Step>

        **Update the import paths to match your project setup.**

      </Step>
    </Steps>
  </TabsContent>
</Tabs>

### Usage

<PortalInfoAlert/>

```tsx
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@/components/ui/alert-dialog';
import { Text } from '@/components/ui/text';
```

```tsx
<AlertDialog>
  <AlertDialogTrigger>
    <Text>Show Alert Dialog</Text>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone. This will permanently delete your account and remove
        your data from our servers.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>
        <Text>Cancel</Text>
      </AlertDialogCancel>
      <AlertDialogAction>
        <Text>Continue</Text>
      </AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>
```
